import { defineComponent, ref, watch } from "vue"

export const ScroeLevelSelect = defineComponent({
  props: {
    value: String
  },
  emits: {
    'update:value': (data: string | undefined): boolean => true
  },
  setup(props, {emit}) {
    let value = ref<string | undefined>(undefined)

    const options = [
      {
        label: 'A',
        value: 'A'
      },
      {
        label: 'B',
        value: 'B'
      },
      {
        label: 'C',
        value: 'C'
      },
      {
        label: 'D',
        value: 'D'
      }
    ]

    watch(
      () => props.value,
      n => {
        value.value = n
      },
      {immediate: true}
    )

    watch(
      () => value.value,
      n => {
        emit('update:value', n)
      }
    )

    return () => <a-select v-model={[value.value, 'value']} options={options}></a-select>
  }
})
